﻿@using Capstone_20130302.Models
@{
    List<UserProfile> listlike = ViewBag.listlike;
    List<UserProfile> listbuy = ViewBag.listbuy;
    List<Comment> listcmt = ViewBag.listcmt;
    UserProfile _user = ViewBag.detailuser;
    List<Product> listrecommend = ViewBag.listrecommend;
}
@model Capstone_20130302.Models.Product
@{
  
    ViewBag.Title = @Html.DisplayFor(model => model.Name) + " - SocialBuy.vn";
    Layout = "~/Views/Shared/_FreeLayout.cshtml";
    
}
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/livestamp.js"></script>
<div class="page" id="p-product">
    <div class="header">
        <div class="ribbon-wrapper">
            <div class="btn-like"></div>
        </div>
        <div class="like-wrapper">
            <div class="stat"><span id="TotalLike">@listlike.Count.ToString("###,###,###,0")</span> likes</div>
            <div class="like-list" id="like-list">
                <ul id="like-list_member" class="like-list_member">
                    @foreach (UserProfile user in listlike)
                    {
                        <li id="user_@user.UserId"><a href="/User/Id/@user.UserId">
                            <img class="user"  title="@user.Profile.DisplayName" src="/Image/@user.Profile.ProfileImage.ImageId"></a></li>
                    }

                </ul>
            </div>
        </div>
        <h3>@Html.DisplayFor(model => model.Name)</h3>
        by <a class="store " href="/Store/Id/@Html.DisplayFor(model => model.Store.StoreId)">@Html.DisplayFor(model => model.Store.StoreName)</a>
        in <a href="/Product/Category?id=@Model.CategoryId">@Model.Category.Name</a> collection
    </div>
    <div class="clearfix">
        <div class="left-side">
            <div class="buy-wrapper">
                @if (listbuy.Count > 0)
                {
                    <div class="stat">
                        <span>@listbuy.Count.ToString("###,###,###,0")</span>
                        <text>people've ordered this item</text>
                    </div>                                                 
                    <div class="buy-list">
                        <ul class="clearfix">
                            @foreach (UserProfile user in listbuy)
                            {
                                <li><a href="/User/Id/@user.UserId">
                                    <img class="user" src="/Image/@user.Profile.ProfileImage.ImageId" title="@user.Profile.DisplayName"></a></li>
                            }

                        </ul>
                    </div>
                }
                else
                {
                    <div class="stat">Be the first one ordering this product</div>
                }
                <a class="btn add-cart" data-pid="@Model.ProductId" data-title="@Model.Name" data-sid="@Model.Store.StoreId" data-store="@Model.Store.StoreName" data-fee="@Model.Store.ShipFee" data-image="/Image/@Model.ProductImages.ElementAt(0).ImageId" data-price="@Model.Price">
                    <span>@Html.DisplayFor(model => model.Price)</span>Add to Cart
                </a>
                <div class="desc">
                    @Html.DisplayFor(model => model.Description)
                </div>
                <div class="specs">
                    <h4>Specifications</h4>
                    <table class="table specs">
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <div class="right-side">
            <div id="product-carousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    @foreach (var image in Model.ProductImages)
                    {
                        if (image.ImageId == Model.ProductImages.ElementAt(0).ImageId)
                        {
                        <div class="item active" style="background-image: url(/Image/@image.ImageId)"></div>
                        }
                        else
                        {
                        <div class="item" style="background-image: url(/Image/@image.ImageId)"></div>
                        }
                    }
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#product-carousel" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#product-carousel" data-slide="next">›</a>
            </div>
            <div class="comment-wrapper">
                <div class="stat"><span id="countcomment">@listcmt.Count</span> comments</div>
                <br>
                <!-- Post box -->
                @if (User.Identity.IsAuthenticated)
                {
                    <div class="postbox">

                        <form action="" method="get" onsubmit="return PostComment()" accept-charset="utf-8">

                            <div class="textarea-wrapper" data-role="textarea">
                                <div class="textarea">
                                    <textarea onkeyup="CheckContent(this.value)" id="contentcomment" placeholder="Leave a message..." rows="1"></textarea>

                                </div>

                                <div class="post-actions">
                                    <div id="error" class="errorcomment"></div>
                                    <button type="submit" class="btn btn-small btn-default">
                                        Post this comment
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- Post box -->
                }
                <ul class="comment-list">
                    @foreach (Comment cmt in listcmt)
                    {
                        //DateTime dt = new DateTime(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Local);
                        //DateTime dtNow = cmt.CreateDate;
                        //TimeSpan result = dtNow.Subtract(dt);
                        //int seconds = Convert.ToInt32(result.TotalSeconds);
                        <li class="item">
                            <div class="avatar">
                                <a href="/User/Id/@cmt.User.UserId">
                                    <img class="user" src="/Image/@cmt.User.Profile.ProfileImage.ImageId"></a>
                            </div>
                            <div class="comment-box">
                                <div class="header">
                                    <a href="/User/Id/@cmt.User.UserId" class="name">@cmt.User.Profile.DisplayName   @if (cmt.User.UserName == Model.Store.Owner.UserName)
                                                                                            { <span class="owner"></span> } </a>
                                     <span  class="time" data-livestamp="1212121212"></span>
                                </div>

                               <div class="content">@cmt.CommentContent</div>
                            </div>
                        </li>
                    }

                </ul>
            </div>
        </div>

    </div>
    <div class="ease"></div>
    <section class="shelf">
        <div class="h-also-like"></div>
        <br />
        <div class="shelf-wrapper product-grid" id="picks">
            @foreach (var item in listrecommend)
            {
                <div class="product cate-@item.CategoryId">
                    <a href="/Product/Id/@item.ProductId">
                        <div class="image">
                            <div class="img" style="background: url(/Image/@item.ProductImages.First().ImageId)"></div>
                            <div class="detail">
                                <div class="price">
                                    $@item.Price
                                </div>
                                <div class="buttons">View details</div>
                            </div>
                        </div>
                        <div class="description">
                            <h4>@item.Name</h4>
                            <p>@item.Description</p>
                        </div>
                    </a>
                </div>
            }
        </div>
</section>
</div>


<style type="text/css">
    .h-also-like {
        background: url(/Images/h-also-like.png);
        height: 66px;
        width: 880px;
        margin: -7px auto 0;
    }
    .ease {
        height: 50px;
        width: -webkit-calc(100%+80px);
        border-left: solid 1px #fff;
        border-right: solid 1px #fff;
        background: -webkit-linear-gradient(top, #FFF, #E4E4E4);
        margin: 40px -40px -40px;
    }
    .shelf {
        margin: 40px -40px -40px;
        border: solid 1px #fff;
    }
    .errorcomment {
        margin: 5px 7px;
        float: left;
        color: #E93535;
    }

    #p-product {
        border: solid 1px #DBDBEA;
        background: #fff url(/Images/fx-grad.jpg) top no-repeat;
        margin: 50px auto;
        padding: 40px;
        box-sizing: border-box;
        line-height: 1.5;
        color: #646472;
        box-shadow: 0px 2px 5px #CCC;
    }

        #p-product .header {
            position: relative;
        }

            #p-product .header h3 {
                font-family: "Century";
                font-weight: normal;
                color: #1F1F2C;
                font-size: 28px;
            }

    .like-wrapper {
        float: right;
        width: 220px;
    }

    .buy-list ul {
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .left-side {
        padding-top: 30px;
        width: 35%;
        float: left;
    }

        .left-side h4 {
            margin-top: 20px;
            color: #CA6D63;
        }

        .left-side table tr th {
            padding-left: 0;
            font-weight: normal;
            color: rgba(100, 100, 114, 0.61);
        }

        .left-side table tr td,
        .left-side table tr th {
            padding-top: 3px;
            padding-bottom: 3px;
            border-top: 1px dashed #ccc;
        }

        .left-side table tr:first-child td,
        .left-side table tr:first-child th {
            border-top: none;
        }

    .add-cart {
        text-transform: uppercase;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.36);
        font-size: 90%;
        margin: 20px 0;
        padding: 3px 15px;
    }

        .add-cart span {
            font-family: "Century";
            margin-right: 10px;
            font-size: 140%;
            font-weight: normal;
        }

    .right-side {
        padding-top: 30px;
        width: 60%;
        float: right;
    }

    .carousel .carousel-inner .item {
        height: 400px;
        overflow: hidden;
        background-position: center;
        background-size: 100%;
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.22);
    }

    .comment-form textarea {
        width: 90%;
        height: 30px;
    }

    .comment-form:focus textarea {
        width: 90%;
        height: 60px;
    }

    .postbox {
        position: relative;
        margin: 15px 0;
    }

        .postbox .post-actions {
            visibility: visible;
            filter: alpha(opacity=100);
            -khtml-opacity: 1;
            -moz-opacity: 1;
            opacity: 1;
        }

        .postbox .post-actions {
            -webkit-transition: opacity linear .2s;
            -moz-transition: opacity linear .2s;
            -ms-transition: opacity linear .2s;
            -o-transition: opacity linear .2s;
            transition: opacity linear .2s;
            border-top: 1px dotted #C6CDD6;
            text-align: right;
        }

    .textarea-wrapper {
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -ms-transition: all .2s linear;
        -o-transition: all .2s linear;
        transition: all .2s linear;
        position: relative;
        padding: 5px 0 0;
        border-radius: 3px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
        background-color: rgba(255, 255, 255, 0.45);
        background-image: -webkit-linear-gradient(top,rgba(245, 245, 245, 0),rgba(255, 255, 255, 0.45));
        border: 1px solid rgba(75, 83, 94, 0.45);
    }

        .textarea-wrapper textarea {
            border: none;
            margin: 0;
            width: 100%;
            box-sizing: border-box;
            box-shadow: none;
            resize: none;
        }

            .textarea-wrapper textarea:focus {
                box-shadow: none;
                height: 60px;
            }

        .textarea-wrapper:focus .post-actions {
            opacity: 1;
        }

    .post-actions .btn {
        border-radius: 0 0 4px 0;
        border: solid 1px #979797;
        color: #424242;
        font-weight: bold;
        text-transform: uppercase;
        background: -webkit-linear-gradient(top, #FCFCFC, #CACACA);
        text-shadow: 1px 1px 2px white;
        box-shadow: inset 1px 1px 5px white;
        position: relative;
        right: -2px;
    }

        .post-actions .btn:hover {
            background: -webkit-linear-gradient(top, #CACACA, #FCFCFC);
        }

        .post-actions .btn:focus {
            background: #CACACA;
        }

    .comment-list {
        list-style: none;
        margin-left: 0;
    }

        .comment-list li.item {
            margin-bottom: 10px;
        }

            .comment-list li.item .avatar {
                position: absolute;
            }

            .comment-list li.item .comment-box {
                margin-left: 55px;
            }

                .comment-list li.item .comment-box .content {
                    line-height: 1.4;
                    opacity: .8;
                }

            .comment-list li.item img {
                float: left;
                margin-right: 15px;
            }

            .comment-list li.item a.name {
                font-weight: bold;
                color: #D86959;
            }

                .comment-list li.item a.name .owner:after {
                    content: "Owner";
                    margin-left: 8px;
                    text-transform: uppercase;
                    background: rgba(236, 97, 97, 0.69);
                    font-weight: normal;
                    color: white;
                    font-size: 80%;
                    padding: 2px 5px;
                    border-radius: 2px;
                }

            .comment-list li.item .time {
                opacity: 0;
                float: right;
            }

            .comment-list li.item:hover .time {
                opacity: .6;
            }

    .ribbon-wrapper {
        position: absolute;
        width: 41px;
        top: -59px;
        right: 0;
    }

    .btn-like {
        background: url(/Images/like-ribbon.png) no-repeat 0 -73px;
        width: 41px;
        height: 66px;
        cursor: pointer;
        -webkit-transition: opacity linear .5s;
        -moz-transition: opacity linear .5s;
        -ms-transition: opacity linear .5s;
        -o-transition: opacity linear .5s;
        transition: opacity linear .5s;
    }

        .btn-like.active {
            background: url(/Images/like-ribbon.png) no-repeat 0 0;
            -webkit-transition: opacity linear .5s;
            -moz-transition: opacity linear .5s;
            -ms-transition: opacity linear .5s;
            -o-transition: opacity linear .5s;
            transition: opacity linear .5s;
        }

    .item-wrapper.product {
        width: 100%;
        border-top: solid 1px #fff;
        padding-bottom: 40px;
    }

    .product .heading {
        background: url(/Images/h-favorite-products.png) no-repeat;
        height: 64px;
        position: relative;
        top: -4px;
        margin: 0 auto 30px auto;
    }

    .item-wrapper {
        box-shadow: inset 0px 10px 70px 1px rgba(155, 155, 140, 0.23);
        padding: 0 40px;
        box-sizing: border-box;
    }

        .item-wrapper .filter ul {
            list-style: none;
            margin: 0;
        }

            .item-wrapper .filter ul li {
                float: left;
                margin-right: 15px;
            }

                .item-wrapper .filter ul li a {
                    color: #646472;
                    padding: 5px 10px;
                }

                    .item-wrapper .filter ul li a.active {
                        font-weight: bold;
                        border-bottom: solid 4px #B9B9C8;
                    }

                    .item-wrapper .filter ul li a span {
                        opacity: .6;
                        color: #646472;
                        font-weight: normal;
                    }

    .filter {
        margin: 20px 0 40px 0;
        text-shadow: 1px 1px 1px #fff;
    }

    .product-grid {
        width: 100%;
        padding-left: 35px;
    }

        .product-grid .product {
            padding: 0;
            border: solid 1px white;
            box-shadow: 1px 2px 6px #B1B1B1;
            margin: 10px;
        }

            .product-grid .product .description {
                padding: 10px;
                color: #646472;
            }

                .product-grid .product .description h4 {
                    font-size: 120%;
                    margin: 0;
                    font-family: "Century";
                    font-weight: normal;
                }

                .product-grid .product .description p {
                    margin-bottom: 0;
                    opacity: .7;
                }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("/Product/GetProductLike/@Model.ProductId", function (data) {
            if(data)
            {
                $(".btn-like").toggleClass("active");
            }
        });
		
        var specsJsonData = @Html.Raw(Model.SpecsInJson)


       for(var i = 0; i < specsJsonData.length; i++) {
           $(".specs tbody").append("<tr><th>"+specsJsonData[i].name+"</th><td>"+specsJsonData[i].content+"</td></tr>");
       };

    });
		
    function CheckContent(value){
        if(value.length < 1 )
        {
            $('#error').text('Comment field is required.');
            return false;
        }
        else
        {
            $('#error').text('');
            return true;
        }
    }
    function GetHTMLContent(text){
     
        var texthtml = '';
        @if (_user != null)
        {

            <text>
     var User_UserName = '@_user.UserName';
     var Owner_UserName = '@Model.Store.Owner.UserName';
     texthtml = '<li class="item">';
     texthtml +=  '<div class="avatar">';
     texthtml += '<a href="/User/Id/@_user.UserId"><img class="user" src="/Image/@_user.Profile.ProfileImage.ImageId"></a>';
        texthtml += '</div>';
        texthtml += '<div class="comment-box">';
        texthtml += '<div class="header">';
        texthtml += '<a href="" class="name"> @_user.Profile.DisplayName';
        if (User_UserName == Owner_UserName)
        {
            texthtml +=  ' <span class="owner"></span>';                                                      
        }
        texthtml += '</a>';
        texthtml += '<span class="time">@DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss")</span>';
                texthtml +='</div>';
                texthtml +='<div class="content">' + text + '</div>';
                texthtml += '</div>';
                texthtml += '</li>';
             </text>
        }
      
     return texthtml;
 }

 function PostComment(){       
     var text = document.getElementById('contentcomment');
     if(text.value.length < 1 )
     {
         $('#error').text('Comment field is required.');
         return false;
     }
     var postData = { 'ProductId': @Model.ProductId,'CommentContent' : text.value };
        jQuery.ajax({
            url: '../../Product/PostComment',
            traditional: true,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json', type: "POST",
            data: JSON.stringify(postData),
            success: function (data) {
                if (data == "true") {                   
                    var html = GetHTMLContent(text.value);
                    $('.comment-list').prepend(html);
                    var num =  $('#countcomment').text();
                    num = parseInt(num) + 1;
                    $('#countcomment').text(num);
                }
                else
                {
                    alert(data);     
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.statusText);
            }
        });
        return false;
    }

    function CreateTextUser()
    {
         @if (_user != null)
         {
             <text>
        var html = "";
        html ="<li id='user_@_user.UserId'><a href='/User/Id/@_user.UserId'>"
        html +="<img class='user' src='/Image/@_user.Profile.ProfileImage.ImageId'></a></li>"
        return html;
            </text>
         }
    }

    $(".btn-like").click(function() {
      
        var classname= $('.btn-like').attr('class');
        if(classname == 'btn-like active')
        {
            $.getJSON("/Product/DeleteProductLike/@Model.ProductId", function (data) {
                if(data)
                {
                    $(".btn-like").toggleClass("active");
                    var num =  $('#TotalLike').text();
                    num = parseInt(num) -1;
                    $('#TotalLike').text(num);
                    @if (_user != null)
                    {
                         <text>
                    $("#user_@_user.UserId").remove();
                        </text>
                    }
                    
                }
                else
                {
                    alert(data);
                }
            });
        }
        else
        {
            $.getJSON("/Product/AddProductLike/@Model.ProductId", function (data) {
                if(data == "true")
                {
                    $(".btn-like").toggleClass("active");
                    var num =  $('#TotalLike').text();
                    num = parseInt(num) +1;
                    $('#TotalLike').text(num);
                    @if (_user != null && listlike.Count < 6)
                    {
                        <text>
                    var html = CreateTextUser();
                            
                    $('.like-list_member').prepend(html);
                        </text>
                    }
                    postToFeed();
                }
                else
                {
                    alert(data);
                }
            });
        }
    })

    $(".btn.add-cart").click(function(){
        var $this = $(this)
        var shop = new ShopModel($this.attr("data-store"), parseInt($this.attr("data-sid")));
        var product = new ProductModel($this.attr("data-title"), $this.attr("data-image"), parseFloat($this.attr("data-price")), 1, parseInt($this.attr("data-pid")), shop.shopId);
        cartmodel.checkShop(shop);
        cartmodel.addProduct(product);
        notify({image: $this.attr("data-image"), content: $this.attr("data-title") + " is added to your cart." , title: "Cart Updated"})
    })
    
    
</script>

<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>

<script> 
    FB.init({appId: "541295582548776", status: true, cookie: true});

    function postToFeed() {

        // calling the API ...
        var obj = {
            method: 'feed',
            redirect_uri: 'http://socialbuy.vn:1701/Product/Id/@Model.ProductId',
            link: 'http://socialbuy.vn:1701/Product/Id/@Model.ProductId',
            picture: 'http://socialbuy.vn:1701/Image/@Model.ProductImages.ElementAt(0).ImageId',
            name: '@Model.Name',
            caption: 'From @Model.Store.StoreName',
            description: '@Model.Description'
        };

        function callback(response) {
            document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }
        FB.ui(obj, callback);
    }
</script>
